<template>
  <el-form-item :prop="prop" v-bind="$attrs" v-on="$listeners">
    <el-input
      v-if="type === 'input'"
      v-model="formData[prop]"
      v-bind="{ ...inputAttrs, ...$attrs, ...slotAttrs }"
      v-on="$listeners"
    >
      <template v-for="(inputSlot, index) in slotAttrs.slots">
        <span
          v-if="inputSlot.labelName == 'span'"
          :key="index"
          :slot="inputSlot.name"
          v-on="inputSlot.listen"
        >
          {{ inputSlot.value }}
        </span>
        <el-button
          v-else-if="inputSlot.labelName == 'button'"
          :key="index"
          :slot="inputSlot.name"
          :icon="inputSlot.icon"
          v-on="inputSlot.listen"
        >
          {{ inputSlot.value }}
        </el-button>
      </template>
    </el-input>
    <el-input
      v-else-if="type === 'textarea'"
      v-model="formData[prop]"
      type="textarea"
      v-bind="{ ...inputAttrs, ...$attrs, ...slotAttrs }"
      v-on="$listeners"
    />
    <el-select
      v-else-if="type === 'select'"
      v-model="formData[prop]"
      v-bind="{ ...selectAttrs, ...$attrs, ...slotAttrs }"
      v-on="$listeners"
    >
      <el-option
        v-for="(item, key) in slotAttrs.options"
        :key="key"
        :label="item[slotAttrs.optionKey ? slotAttrs.optionKey.value : 'value']"
        :value="item[slotAttrs.optionKey ? slotAttrs.optionKey.key : 'key']"
      />
    </el-select>
    <el-date-picker
      v-else-if="type === 'date'"
      v-model="formData[prop]"
      type="date"
      v-bind="{ ...selectAttrs, ...$attrs, ...slotAttrs }"
      v-on="$listeners"
    />
    <el-date-picker
      v-else-if="type === 'dateTime'"
      v-model="formData[prop]"
      :type="slotAttrs.type || 'datetime'"
      v-bind="{ ...selectAttrs, ...$attrs, ...slotAttrs }"
      v-on="$listeners"
    />
    <el-time-picker
      v-else-if="type === 'time'"
      v-model="formData[prop]"
      v-bind="{ ...selectAttrs, ...$attrs, ...slotAttrs }"
      v-on="$listeners"
    />

    <el-cascader
      v-else-if="type === 'cascader'"
      v-model="formData[prop]"
      v-bind="{ ...selectAttrs, ...$attrs, ...slotAttrs }"
      v-on="$listeners"
    />

    <template v-else-if="type === 'upload'">
      <el-upload
        class="upload-demo"
        action="/api/pc/upload/upload_file"
        :limit="1"
        list-type="picture"
        v-bind="{ ...$attrs, ...slotAttrs }"
        v-on="$listeners"
      >
        <el-button size="small" type="primary">
          点击上传
        </el-button>
      </el-upload>
      <div class="upload-hint">
        {{ slotAttrs.hint || '宽高：64px*64px PNG格式透明背景' }}
      </div>
    </template>

    <el-radio-group
      v-else-if="type === 'radio'"
      v-model="formData[prop]"
      v-bind="{ ...$attrs, ...slotAttrs }"
      v-on="$listeners"
    >
      <el-radio
        v-for="(item, key) in slotAttrs.options"
        :key="key"
        :label="item[slotAttrs.optionKey ? slotAttrs.optionKey.key : 'key']"
      >
        <template v-if="slotAttrs.valType === 'img'">
          <img class="defaultimg" :src="item.value" alt="">
        </template>
        <template v-else>{{ item[slotAttrs.optionKey ? slotAttrs.optionKey.value : 'value']}}</template>
      </el-radio>
    </el-radio-group>

    <el-button
      v-else-if="type === 'button'"
      v-model="formData[prop]"
      v-bind="{ ...$attrs, ...buttonDefaultAttrs, ...slotAttrs }"
      v-on="$listeners"
    >
      {{ slotAttrs.name }}
    </el-button>
  </el-form-item>
</template>

<script>
export default {
  name: 'FormItem',
  props: {
    type: {
      // 元素类型
      type: String,
      default: 'input'
    },
    prop: {
      // el-form-item prop
      type: String,
      default: ''
    },
    formData: {
      // form 绑定的数据
      type: Object,
      default: () => ({})
    },
    slotAttrs: {
      // form 绑定的数据
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      inputAttrs: {
        style: { width: '160px' },
        placeholder: '请输入'
      },
      buttonDefaultAttrs: {
        size: 'small',
        type: 'text'
      },
      selectAttrs: {
        style: { width: '160px' },
        placeholder: '请选择'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.upload-hint {
  color: #c82a29;
}
.defaultimg {
  width: 80px;
  height: 80px;
}
</style>
